
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<head>
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .message-list {
            list-style: none;
            padding: 0;
            max-width: 500px;
            margin: 20px auto;
        }
        .message-item {
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            background: #fff;
            border-radius: 4px;
            margin-bottom: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .new-message {
            animation: fadeIn 0.5s;
            background: #f8f9fa;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
<div class="button-container">
    <!-- 添加显示当前位置的按钮 -->

    <div class="container">
        <div class="header">
            <h1>H5消息中心</h1>
        </div>
        <div class="message-list" id="messageList">
            <!-- 消息将通过JS动态加载 -->
            <ul id="messageList1" class="message-list">
                <!-- 动态内容将在这里插入 -->
            </ul>
        </div>
    </div>
</div>
<script>
    // 创建单个消息项
    function createMessageItem(msg) {
        const li = document.createElement('li');
        li.className = 'message-item';
        li.innerHTML = `
            <div>${msg.text}</div>
            <small style="color:#999">${msg.time}</small>
        `;
        return li;
    }

    // 添加新消息
    function addMessage(message) {
        const now = new Date();
        const newMsg = {
            text: message,
            time: `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`
        };

        const list = document.getElementById('messageList1');
        const newItem = createMessageItem(newMsg);
        newItem.classList.add('new-message');

        // 插入到列表顶部
        list.insertBefore(newItem, list.firstChild);
        console.log('KitDemo-MessagePage: insert msg successfully');
    }

    // 监听端口消息
    window.addEventListener('message', function (event) {
      if (event.data === '__init_port__') {
        if (event.ports[0] !== null) {
           //  保存从应用侧发送过来的端口
           const h5Port = event.ports[0];
           h5Port.onmessage = function (event) {
             // 获取数据
             let result = event.data;
             console.log('KitDemo-MessagePage: call addMessage:' + result);
             let str = result.replaceAll(/\\n/g,'');
             const message = JSON.parse(str);
             // PUSH extension
             if (typeof (message) !== 'string') {
               addMessage(message.data);
             } else {
               // background msg
               const bgMsg = JSON.parse(message);
               console.log('KitDemo-MessagePage bgMsg:' + bgMsg);
               addMessage(bgMsg.data);
             }
           }
        }
      }
    })
</script>
</body>
</html>